<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">


	<p:dialog id="dialog" header="Buy ticket" modal="true"
		widgetVar="buyTicket" resizable="false">
		<h:form id="buyTicketForm">
			<p:messages id="buyTicketMessages" closable="true" />
			<p:panelGrid id="display" styleClass="noBorders">
				<p:row>
					<p:column colspan="5" styleClass="ui-widget-header">
						<h:outputText value="Select departure and destination stations" />
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputLabel for="tripID" value="Trip ID" />
					</p:column>
					<p:column>
						<p:inputText id="tripID" size="4" value="#{buyTicket.tripID}"
							readonly="true" />
					</p:column>
					<p:column>
						<h:outputLabel for="ticketsCount" value="Tickets" />
					</p:column>
					<p:column>
						<p:inputText id="ticketsCount" size="4"
							value="#{buyTicket.ticketsCount}" readonly="true" />
					</p:column>
					<p:column>
						<p:selectOneMenu id="tripStationA"
							value="#{buyTicket.selectedStationA}">
							<f:selectItem itemLabel="-- Select station A --" itemValue="" />
							<f:selectItems value="#{buyTicket.stationsA}" var="station"
								itemValue="#{station}" />
							<f:ajax listener="#{buyTicket.isSelectedStationA}" execute="@this"
								render="tripStationB buyTicketMessages"/>
						</p:selectOneMenu>
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputLabel for="routeName" value="Route" />
					</p:column>
					<p:column colspan="3">
						<p:inputText id="routeName" size="30"
							value="#{buyTicket.routeName}" readonly="true" />
					</p:column>
					<p:column>
						<p:selectOneMenu id="tripStationB"
							value="#{buyTicket.selectedStationB}">
							<f:selectItem itemLabel="-- Select station B --" itemValue="" />
							<f:selectItems value="#{buyTicket.stationsB}" var="station"
								itemValue="#{station}" />
							<f:ajax listener="#{buyTicket.isSelectedStationB}"
								render="ticketsCount" />
						</p:selectOneMenu>
					</p:column>
				</p:row>
				<p:row>
					<p:column colspan="5">
						<p:spacer height="10" />
					</p:column>
				</p:row>
				<p:row>
					<p:column colspan="5" styleClass="ui-widget-header">
						<h:outputText
							value="Check your personal information and press &quot;Buy&quot;" />
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputLabel for="surname" value="Surname" />
					</p:column>
					<p:column colspan="4">
						<p:inputText id="surname" value="#{auth.surname}" readonly="true" />
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputLabel for="name" value="Name" />
					</p:column>
					<p:column colspan="4">
						<p:inputText id="name" value="#{auth.name}" readonly="true" />
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputLabel for="birthday" value="Birthday" />
					</p:column>
					<p:column colspan="4">
						<p:inputText id="birthday" value="#{auth.birthday}"
							readonly="true" />
					</p:column>
				</p:row>
				<p:row>
					<p:column colspan="4">
						<p:spacer />
					</p:column>
					<p:column styleClass="alighRightColumnContents">
						<p:commandButton id="buyDialogButton" value="Buy"
							icon="ui-icon-cart" >
							<f:ajax listener="#{buyTicket.buy}"
								execute="tripStationA tripStationB"/>
						</p:commandButton>
					</p:column>
				</p:row>
			</p:panelGrid>
		</h:form>
	</p:dialog>

</ui:composition>